<!-- 
  setup 函数：

    1. 返回值
        1. 没有返回值
        2. 返回一个对象，对象中每一项会直接给到组件实例this，在组件模板中可以使用
        3. 返回一个函数，该函数是一个渲染函数【一般不需要用到】

    2. 参数
        1. props
          1. 组件接受到的 props 数据
          2. props 是一个 Proxy 对象，不要直接对其解构，会丢失响应式。
          3. 要操作解构的话，可以借助 toRefs 或 toRef 两个工具函数

        2. context
          1. 一个普通对象，可以安全的解构
          2. attrs  attrs数据         this.$attrs
          3. slots  组件插槽内容数据    this.$slots
          4. emit   一个函数           this.$emit
          5. expose 一个函数，用于控制对外的暴露

    3. setup 执行时机与次数
        组件创建之前【beforeCreate】执行
        一个生命周期内，只会执行一次

    4. setup 的this问题
        不管是 setup函数写法 还是 setup语法糖写法，都没有 this 

 -->

<template>
  <div>
    <h1>App</h1>
    <Hello ref="myHello" />
  </div>
</template>

<script>
import Hello from "./components/Hello.vue";

export default {
  components: {
    Hello,
  },

  mounted() {
    // 获取标记的 Hello 组件的实例对象

    // 这里获取的东西，分两种
    //    1. 组件的完整实例
    //    2. 组件内控制的对外暴露
    //       1. 声明 expose 选项
    //       2. 在 setup 函数内，通过 context.expose() 对外暴露的话
    //       3. 在 setup 语法糖内，通过 defineExpose() 对外暴露的话
    console.log(this.$refs.myHello);
  },
};
</script>
